<style lang="scss" scoped>
.test{
    padding: 10px;
}
.operation{
    padding: 10px 24px;
}
.chart {
    margin: 0 24px 18px 24px;
    border: 1px solid rgba(241, 242, 242, 1);
    height: 800px;
    margin-top: 20px;
}
</style>

<template>
    <div class="test">
        <el-row :gutter="16" class="operation">
            <el-col :span=".5">
                <el-select v-model="direction" size="small" placeholder="显示方向" @change="directionChange">
                    <el-option value="top" label="竖"></el-option>
                    <el-option value="left" label="横"></el-option>
                </el-select>
            </el-col>
            <el-col :span=".5">
                <el-select v-model="layer" size="small"  placeholder="显示层级" @change="layerChange">
                    <el-option :value="0" label="全部显示"></el-option>
                    <el-option v-for="item in layerList" :key="item" :value="item"  :label="`${item}层`"></el-option>
                </el-select>
            </el-col>
            <el-col :span=".5">
                <el-button type="primary" size="small"  @click="downloadPic">导出</el-button>
            </el-col>
        </el-row>

        <div ref="orgChartDom" class="chart"></div>
    </div>
</template>

<script>
import base from '../assets/js/base';
import OrgChart from '../assets/js/orgChart';

export default {
    name: "test",
    data() {
        return {
            direction: 'top',
            layer: 0,
            layerList: [1,2,3,4,5,6,7,8,9],
            treeData: [
                {
                    "orgId":28,
                    "orgParentId":0,
                    "orgName":"水果集团",
                    "orgManagerName":"xun悟空",
                    "orgManagerPositionName":"集团老总",
                    "staffNumbers":200,
                    "planNumbers":240,
                    "childList":[
                        {
                            "orgId":671,
                            "orgParentId":28,
                            "orgName":"南方公司",
                            "orgManagerName":"ju八戒",
                            "orgManagerPositionName":"厂长",
                            "staffNumbers":100,
                            "planNumbers":120,
                            "childList":[
                                {
                                    "orgId":1460,
                                    "orgParentId":671,
                                    "orgName":"种植部",
                                    "orgManagerName":"牛郎",
                                    "orgManagerPositionName":"部长",
                                    "staffNumbers":100,
                                    "planNumbers":120
                                },
                                {
                                    "orgId":1464,
                                    "orgParentId":671,
                                    "orgName":"运输部",
                                    "orgManagerName":"哮天犬",
                                    "orgManagerPositionName":"部长",
                                    "staffNumbers":100,
                                    "planNumbers":120,
                                    "childList":[
                                        {
                                            "orgId":1478,
                                            "orgParentId":1464,
                                            "orgName":"运输一队",
                                            "orgManagerName":"大黄",
                                            "orgManagerPositionName":"队长",
                                            "staffNumbers":100,
                                            "planNumbers":120
                                        }
                                    ]
                                },
                                {
                                    "orgId":1466,
                                    "orgParentId":671,
                                    "orgName":"加工部",
                                    "orgManagerName":"织女",
                                    "orgManagerPositionName":"部长",
                                    "staffNumbers":100,
                                    "planNumbers":120
                                },
                                {
                                    "orgId":1488,
                                    "orgParentId":671,
                                    "orgName":"销售部",
                                    "orgManagerName":"叨叨哥",
                                    "orgManagerPositionName":"部长",
                                    "staffNumbers":100,
                                    "planNumbers":120
                                },
                                {
                                    "orgId":1489,
                                    "orgParentId":671,
                                    "orgName":"财务部",
                                    "orgManagerName":"武大郎",
                                    "orgManagerPositionName":"部长",
                                    "staffNumbers":100,
                                    "planNumbers":120
                                }
                            ]
                        },
                        {
                            "orgId":1490,
                            "orgParentId":28,
                            "orgName":"北方公司",
                            "orgManagerName":"沙僧",
                            "orgManagerPositionName":"厂长",
                            "staffNumbers":100,
                            "planNumbers":120
                        }
                    ]
                }
            ],
        };
    },
    mounted() {
        this.getChartData();
    },
    methods: {

        // 机构图--获取机构图数据
        getChartData() {
            this.orgChartData = this.treeData;
            this.showOrgChartData = base.deepClone(this.treeData);
            this.orgChartObject = new OrgChart(this.$refs.orgChartDom, this.showOrgChartData, 'top');
        },

        // 机构图--显示方向改变
        directionChange(v) {
            if (this.showOrgChartData) {
                this.orgChartObject = new OrgChart(this.$refs.orgChartDom, this.showOrgChartData, v);
            }
        },

        // 层级改变
        layerChange(v) {
            let layer = v === 0 ? 999 : v;
            this.showOrgChartData = base.deepClone(this.orgChartData);
            base.layerTree(this.showOrgChartData, 'childList', layer, 1);
            this.orgChartObject = new OrgChart(this.$refs.orgChartDom, this.showOrgChartData, this.direction);
        },

        // 机构图--导出按钮
        downloadPic() {
            if (this.orgChartObject) {
                this.orgChartObject.exportPNG({
                    filename: "机构图.png", 
                    openInNewTab: false,
                    expandChildren: true, 
                    margin: [10,20,10,20],
                });
            }
        },

        
    }
};
</script>